//导入react-router-dom v6提供的一些函数
import { useNavigate,useLocation,useParams } from 'react-router-dom'

// 高阶组件(包装useNavigate、useLocation、useParams )
function withHook(WrapCompontent) {
  //高阶组件默认情况下，包装与被包装组件名是一样的
  //React使用的组件名称为displayname
  // 包装后的组件名称为：withHookA
  
  WrapCompontent.displayName = `WithHook${getDisplayName(WrapCompontent)}`

  return function QiLincompont({title}) {
    const navigate = useNavigate()//获取navigate功能
    const param = useParams();//获取当前路由参数
    const location= useLocation()//获取当前路由 location 信息，监听路由变化
    return <WrapCompontent to={navigate} LC={location} param={param} title={title}></WrapCompontent>
  }
}
// 函数:返回被包装组件的名称A
function getDisplayName(WrapCompontent) {
  return WrapCompontent.displayname || WrapCompontent.name || 'Component'
}

export default withHook